<template>
  <div class="timeLine-vue-slider">
    <vue-slider v-model="ownCurTimerSlider" @change="whenChangeCurTimerSlider" :lazy="true" :data="sliderDateStrList"
      :data-value="'str'" :data-label="'str'" :tooltip="tooltip" :duration="0.2" :marks="true" :adsorb="true">
      <!-- 显示数字刻度的插槽 start -->
      <template v-slot:label="obj">
        <slot name="label" :obj="obj">
          <labelCom :obj="obj" />
        </slot>
      </template>
      <!-- 显示数字刻度的插槽 end -->

      <!-- 刻度条的插槽 start -->
      <template v-slot:step="obj">
        <slot name="step" :obj="obj">
          <stepCom :obj="obj" />
        </slot>
      </template>
      <!-- 刻度条的插槽 end -->

      <!-- 当前点、豆的插槽 start -->
      <template v-slot:dot="obj">
        <slot name="dot" :obj="obj">
          <dotCom :obj="obj" />
        </slot>
      </template>
      <!-- 当前点、豆的插槽 end -->

      <!-- 工具提示条的插槽 start -->
      <template v-slot:tooltip="obj">
        <slot name="tooltip" :obj="obj">
          <tooltipCom :obj="obj" />
        </slot>
      </template>
      <!-- 工具提示条的插槽 end -->
    </vue-slider>
  </div>
</template>
<script>
import dayjs from 'dayjs'
import VueSlider from 'vue-slider-component'

import labelCom from './label.vue'
import stepCom from './step.vue'
import dotCom from './dot.vue'
import tooltipCom from './tooltip.vue'

export default {
  name: 'TimeLine',
  props: {
    curTimeInterval: {
      // 时间间隔 数量
      type: Number,
      default: 60,
    },
    TimeIntervalUnit: {
      // 时间间隔 单位
      type: String,
      default: 'minute', // 小时hour; 分钟minute; 秒second
    },
    curTimerSlider: {
      // 当前时间点  [ 与父组件同步 ]
      type: String,
      default: '',
    },
    changeCurTime: {
      // 更变当前时间的回调函数  可以作为异步函数，等待loading结束后再进行其他操作
      type: Function,
      default: null,
    },
    dateFormartStr: {
      // 日期格式化方式
      type: String,
      default: 'YYYY-MM-DD HH:mm',
    },
    timeListLength: {
      // 时间轴点的数量
      type: Number,
      default: 40,
    },
    tooltip: {
      // 提示条：none不显示; always总是显示; active:拖动时显示
      type: String,
      default: 'always',
    },
    timesOrder: {
      // 时间点排序：sort正序:预报从开始时间到未来的时间点; reverse倒序：历史从现在时间点倒推到之前的时间点
      type: String,
      default: 'sort',
    },
    // EC模式下的说明:
    // <=72小时  3小时 间隔
    // >72小时   6小时 间隔
    cutTime: { // 分割时间
      type: Number,
      default: 0,
    },
    cutedTimeInterval: { //分割时间后的 间隔时间
      type: Number,
      default: 0,
    }
  },
  components: {
    VueSlider,
    labelCom,
    stepCom,
    dotCom,
    tooltipCom,
  },
  data () {
    return {
      sliderDateStrList: [], // 时间轴上的每个时间点的object
      ownCurTimerSlider: '',
    }
  },
  created () {
    if (this.curTimerSlider === '') {
      // 初始化时间
      this.ownCurTimerSlider = dayjs().format(this.dateFormartStr)
      this.$emit('update:curTimerSlider', this.ownCurTimerSlider)
    }else{
      this.ownCurTimerSlider = this.curTimerSlider
    }
  },
  mounted () {
    if (this.ownCurTimerSlider) {
      this.init(this.ownCurTimerSlider)
    }
  },
  watch: {},
  methods: {
    async whenChangeCurTimerSlider (newval) {
      // 可以作为异步函数，等待loading结束后再进行其他操作
      this.$emit('update:curTimerSlider', newval)
      if (this.changeCurTime) {
        await this.changeCurTime(newval)
      }
    },
    curLabelObj (label) {
      // 当前label的所有值
      let curEle = null
      this.sliderDateStrList.some((ele) => {
        if (label === ele.str) {
          curEle = ele
          return true
        }
      })
      return curEle
    },
    // 按照顺序制造当前帧的时间点
    getJDaytime (newval, curTimeInterval, i) {
      let AddTimeInterval = curTimeInterval * i
      if (this.cutTime) { //如果间隔时间有变化
        if (AddTimeInterval > this.cutTime) {
          AddTimeInterval =
            this.cutTime +
            (i - (this.cutTime) / curTimeInterval) * this.cutedTimeInterval
        }
      }
      if (this.timesOrder === 'reverse') {
        AddTimeInterval = -AddTimeInterval
      }
      let jDaytime = dayjs(newval, this.dateFormartStr).add(
        AddTimeInterval,
        this.TimeIntervalUnit
      )
      return jDaytime
    },
    // 设置当前时间点的显示日期
    getCurDay (tmpOneDate, jDaytime) {
      let curDay = jDaytime.format('DD')
      if (this.timesOrder === 'reverse') { // 因为是逆向增加，那么总是第一个头为上一次加的时间
        this.sliderDateStrList[0].curDay = jDaytime
          .add(1, 'day')
          .format('DD')
      } else {
        tmpOneDate.curDay = curDay
      }
      return curDay
    },
    init (newval) {
      let _this = this
      let curTimeInterval = _this.curTimeInterval
      let length = _this.timeListLength
      _this.sliderDateStrList = []
      _this.ownCurTimerSlider = newval
      _this.$emit('update:curTimerSlider', newval)
      let curDay = dayjs(newval, _this.dateFormartStr).format('DD') // 记录下当前日期
      for (let i = 0; i < length + 1; i++) {
        let jDaytime = _this.getJDaytime(newval, curTimeInterval, i) // 按照顺序制造当前帧的时间点
        let tmpOneDate = {
          str: jDaytime.format(_this.dateFormartStr),
          date: jDaytime.toDate(),
          curDay: '', // 当前显示的日期'DD'
        }
        if (jDaytime.format('DD') !== curDay) {
          curDay = _this.getCurDay(tmpOneDate, jDaytime) // 设置当前时间点的显示日期
        }
        if (_this.timesOrder === 'reverse') { // 正序 反序
          _this.sliderDateStrList.unshift(tmpOneDate)
        } else {
          _this.sliderDateStrList.push(tmpOneDate)
        }
      }
    },
  },
  computed: {},
}
</script>
<style lang="scss" scoped>
@import './index.scss';
</style>
